<template>
  <div ref="editorE"></div>
</template>

<script>
  import E from 'wangeditor'
  import axios from "axios";

  export default {
    name: 'file',
    props:['width','height','name'],
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {
      var that = this
      this.editor = new E(this.$refs.editorE);

      this.editor.customConfig.height = 400;

      this.editor.customConfig.menus = [
        'fontSize',
        'foreColor',
        'bold',
        'italic',
        'underline',
        'strikeThrough'
      ]

      this.editor.customConfig.colors = [
          '#333333',
          '#969696',
          '#EF112F',
          '#009FF2',
          '#FB9C00',
          '#Fff'
      ]

      this.editor.customConfig.fontNames = [
          '黑体',
          '仿宋',
          '楷体',
          '标楷体',
          '华文仿宋',
          '华文楷体',
          '宋体',
          '微软雅黑',
          'Arial',
          'Tahoma',
          'Verdana',
          'Times New Roman',
          'Courier New',
      ]

      this.editor.customConfig.fontSizes = {
          '10px': { name: '10px', value: '1' },
          '13px': { name: '13px', value: '2' },
          '16px': { name: '16px', value: '3' },
          '18px': { name: '18px', value: '4' },
          '24px': { name: '24px', value: '5' },
          '32px': { name: '32px', value: '6' },
          '48px': { name: '48px', value: '7' },
          '60px': { name: '60px', value: '8' },
      }

      this.editor.customConfig.uploadImgServer = '/upload'
      this.editor.customConfig.showLinkImg = false
      this.editor.customConfig.onchange = function(html) {
        // that.tongzhi.content = html
        that.$emit('changename',html)
      }

      this.editor.customConfig.customUploadImg = function(files, insert) {
        var formData = new FormData();
        formData.append("pic", files[0]);
        axios.post('/api/plan-market/order-page/upload-pic', formData)
          .then(response => {
            if (response.data.msg.code == 0) {
              insert(response.data.data)
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      }


      this.editor.create();

      this.editor.txt.html(that.name)

    },
    methods: {


    }
  }
</script>

<style scoped>

</style>
